
import React, {Fragment} from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import css from './index.less';

import CountDown from './countDown';
import PixiPacket from './pixiPacket';
import {FRAMES3} from 'common/const';
// import {FRAMES33} from 'common/const';
import FrameList from './frameList';


import startPacket from 'assert/img/otherImgs/startPacket.png';
import packetBg from 'assert/img/otherImgs/packetBg.png';

export default class Pocket extends React.Component {

  static propTypes = {
    toPage: PropTypes.func,
  };

  static defaultProps = {

  };


  constructor(props) {
    super(props);
    this.state = {
      firstCount: true,
      secondCount: false,
      allCountEnd: false,
      xulieEnd: false,
    };

    this.pixiRef = React.createRef();
    this.pixiJiangRef = React.createRef();
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  getXulie = () => {


    this.pixiApp = new PIXI.Application({
      width: 1080,
      height: 1920,
      transparent: true,
    });
    this.pixiJiangRef.current.appendChild(this.pixiApp.view);


    let frameList = new FrameList({
      list: FRAMES3.map(item => item.url),
      loop: false,
      width: 1080,
      height: 1920,
      top: 0,
      left: 0,
      speed: 0.2,
      onComplete: () => {
        this.pixiApp.stage.removeChild(frameList);
        this.setState({
          xulieEnd: true,
        });
      },
    });

    this.pixiApp.stage.addChild(frameList);

  };

  firstEndFunc() {
    this.setState({
      firstCount: false,
      secondCount: true,
    }, () => {  // 保证在重渲染之后取得ref
      const App = new PixiPacket();
      this.pixiRef.current.appendChild(App.app.view);

    });
  };

  secondCountFunc() {
    this.setState({
      allCountEnd: true,
      secondCount: false,
    }, () => {
      this.getXulie();
    });

  }

  render() {

    const { toPage = () => {}, } = this.props;
    const { firstCount, secondCount, allCountEnd, xulieEnd } = this.state;

    // const firstCountProps = {
    //   countEnd: () => {
    //     this.firstEndFunc();
    //   },
    //   time: 3,
    // };

    const firstCountProps = {
      className: css.tiaoguo,
      onClick: () => {
        this.firstEndFunc();
      },

    };
    const secondCountProps = {
      countEnd: () => {
        this.secondCountFunc();

      },
      time: 30,
    };
    // console.log('this.props.url', this.props.url);

    return (
      <div className={css.packetWrapper} style={{background: `url(${packetBg}) no-repeat`}}>
        { // 第一次倒计时
          firstCount && <div className={css.firstWrapper}>
            {/*<div className={css.firstTime}>*/}
              {/*倒数<CountDown {...firstCountProps}/>秒*/}
            {/*</div>*/}
            <img src={startPacket}/>
            <div {...firstCountProps}>开始游戏</div>
          </div>
        }
        { // 第二次倒计时以及第二次结束都会存在
          (secondCount || allCountEnd || xulieEnd) && <div className={css.secondTime}>
            <p>剩余时间</p><br/><span>0:</span>
            <CountDown {...secondCountProps}/>
          </div>
        }
        { // 第二次倒计时的时候渲染pixi红包雨
          secondCount && <div className={css.secondWrapper}>
            <div ref={this.pixiRef}/>
          </div>
        }
        { // 出奖品时的序列帧
          allCountEnd && <div ref={this.pixiJiangRef} className={css.xulie3}/>
        }
        { // 第二次倒计时且序列帧结束后出领奖图片
          xulieEnd && <div className={css.jiang}>
            <img src={this.props.url || 'https://img.alicdn.com/imgextra/i2/3355153118/TB23WhHpviSBuNkSnhJXXbDcpXa-3355153118.png'}/>
            <div onClick={() => toPage()}/>
          </div>
        }
      </div>
    );
  }
}
